<template>
	<view>
		<view class="content">
			<view class="header" :style="[navbarInnerStyle]"></view>
			<view class="content-header">
				<view class="user-info">
					<image src="/static/aidex/images/user01.png" mode=""></image>
					<view class="user-size">
						<view>
							<text class="username">{{$store.state.vuex_user.userName}}</text>
							<text>Hi~</text>
						</view>
						<view>
							<text class="deptname">{{$store.state.vuex_user.dept.deptName}}</text>
							<text>欢迎登录巡检平台</text>
						</view>
					</view>
				</view>
				
				<view class="search">
					<view class="search-input">
						<image src="/static/search.png" mode=""></image>
						<input type="text" v-model="deptName" placeholder="搜索设备" />
					</view>
					<image :src="deviceImage" mode="" class="change" @click="changeDevice"></image>
				</view>
			</view>
			
			<view class="map" :style="{height: mapHeight + 'rpx'}">
				<view class="loading">地图加载中</view>
				<view id="amap" class="amap" :style="{height: mapHeight + 'rpx'}" :listArr="listArr" :change:listArr="ModuleInstance.setParkList"></view>
			</view>
		</view>
		
		<view class="bottom-box-fixed" :style="{bottom: fixBottom + 'rpx'}">
			<view class="jiantou" @click="openHandler">
				<image src="/static/icon-select.png" mode="" :class="openView ? 'rotateImage' : ''"></image>
			</view>
			<view class="box-header">
				<view class="tabs">
					<view>
						<text>待处理工单</text>
						<view class="border">
							<view class="border-son"></view>
						</view>
					</view>
					<view>
						<text>待处理工单</text>
						<view class="border">
							<view class="border-son"></view>
						</view>
					</view>
				</view>
				<text class="look-all">查看全部 ></text>
			</view>
			<view class="popup-content">
				<view class="view-box">
					<view class="view-header">
						<view class="view-first">
							<text class="round"></text>
							<text>56820F56D5</text>
						</view>
						<view class="view-second">
							<text class="round"></text>
							<text>待处理</text>
						</view>
					</view>
					<view class="content-popup">
						<image src="/static/icon-device.png" mode="" class="content-image"></image>
						<view class="content-info">
							<view class="info">
								<image src="/static/icon-phone.png" mode=""></image>
								<text>维修人员：赵一</text>
							</view>
							<view class="info">
								<image src="/static/icon-phone.png" mode=""></image>
								<text>维修人员电话：18837489034</text>
							</view>
							<view class="info">
								<image src="/static/icon-time.png" mode=""></image>
								<text>发布时间：2023-10-16 13:23:43</text>
							</view>
							<view class="info">
								<image src="/static/icon-time.png" mode=""></image>
								<text>截止时间：2023-10-16 13:23:43</text>
							</view>
						</view>
					</view>
				</view>
				<view class="content-footer">
					<text class="info-type">垂直电梯</text>
					<text class="info-btn">查看详情</text>
				</view>
			</view>
		</view>
		
		<u-popup v-if="popupShow" v-model="popupShow" mode="bottom" :safe-area-inset-bottom="true" border-radius="8">
			<view class="dialog">
				<view class="dialog-header">
					<text :class="titleVal >= 1 ?'text-color' : ''" @click="clickTitleHandle(1)">请选择项目</text>
					<image src="/static/icon-jiantou.png" mode=""></image>
					<text :class="titleVal >= 2 ?'text-color' : ''" @click="clickTitleHandle(2)">请选择片区</text>
					<image src="/static/icon-jiantou.png" mode=""></image>
					<text :class="titleVal >= 3 ?'text-color' : ''" @click="clickTitleHandle(3)">请选择设备</text>
				</view>
				<u-gap height="16" bg-color="#f5f5f5"></u-gap>
				<view class="popup-list" v-if="titleVal === 1">
					<view class="popup-li" v-for="(item, index) in projectData" :key="index">
						<text>{{ item.projectName }}</text>
						<u-checkbox v-model="item.checked" shape="square" @change="changeProject(item)"></u-checkbox>
					</view>
				</view>
				<view class="popup-list" v-if="titleVal === 2">
					<view class="popup-li" v-for="(item, index) in areaData" :key="index">
						<text>{{ item.areaName }}</text>
						<u-checkbox v-model="item.checked" shape="square" @change="changeArea(item)"></u-checkbox>
					</view>
				</view>
				<view class="popup-list" v-if="titleVal === 3">
					<view class="popup-li" v-for="(item, index) in equipmentData" :key="index">
						<text>{{ item.equipmentName }}</text>
						<u-checkbox v-model="item.checked" shape="square"></u-checkbox>
					</view>
				</view>
				<view class="popup-footer">
					<u-row gutter="0" justify="between">
						<u-col span="5.8">
							<u-button @click="cancel">取消</u-button>
						</u-col>
						<u-col span="5.8">
							<u-button type="primary">确定</u-button>
						</u-col>
					</u-row>
				</view>
			</view>
		</u-popup>
		<plus-actionsheet></plus-actionsheet>
	</view>
</template>

<script>
	import plusActionsheet from '../../../pages/common/dialog.vue'
	let systemInfo = uni.getSystemInfoSync();
  export default {
		components: {
			plusActionsheet
		},
		data() {
			return {
				openView: false,
				popupShow: false,
				deviceImage: '/static/icon-change.png',
				deptName: '',
				listArr: [],
				mapHeight: null,
				fixBottom: null,
				projectData: [],
				areaData: [],
				equipmentData: [],
				titleVal: 1,
			}
		},
		computed: {
			// 导航栏内部盒子的样式
			navbarInnerStyle() {
				let style = {};
				// 导航栏宽度，如果在小程序下，导航栏宽度为胶囊的左边到屏幕左边的距离
				style.height = this.navbarHeight + 'px';
				// // 如果是各家小程序，导航栏内部的宽度需要减少右边胶囊的宽度
				// #ifdef MP
				let rightButtonWidth = systemInfo.windowWidth - menuButtonInfo.left;
				style.marginRight = rightButtonWidth + 'px';
				// #endif
				return style;
			},
			// 转换字符数值为真正的数值
			navbarHeight() {
				// #ifdef APP-PLUS || H5
				return 44;
				// #endif
				// #ifdef MP
				// 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
				// 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
				// return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				return height;
				// #endif
			}
		},
		onLoad: function() {
			console.log(this.$store.state)
		},
		mounted() {
			this.projectHandlerList()
			this.getDataList()
			this.openHandler()
		},
		methods: {
			projectHandlerList() {
				this.$u.api.projectList().then(res => {
					if (res.code === 200 && res.rows.length) {
						this.projectData = res.rows.map(item => {
							return {...item, checked: false}
						})
					}
				})
			},
			/** 选择项目 */
			changeProject(val) {
				this.projectData = this.projectData.map(item => {
					if (val.id === item.id) {
						item.checked = true
					} else {
						item.checked = false
					}
					return {...item}
				})
				this.titleVal++
				this.equipmentData = []
				this.areaData = []
				this.$u.api.areaList().then(res => {
					if (res.code === 200 && res.rows.length) {
						res.rows.forEach(item => {
							if (val.id === item.projectId) {
								this.areaData.push({...item, checked: false})
							}
						})
					}
				})
			},
			/** 选择片区 */
			changeArea(val) {
				this.areaData = this.areaData.map(item => {
					if (val.id === item.id) {
						item.checked = true
					} else {
						item.checked = false
					}
					return {...item}
				})
				this.titleVal++
				this.equipmentData = []
				this.$u.api.equipmentList().then(res => {
					if (res.code === 200 && res.rows.length) {
						res.rows.map(item => {
							if (val.id === item.areaId) {
								this.equipmentData.push({...item, checked: false})
							}
						})
					}
				})
			},
			clickTitleHandle(val) {
				this.titleVal = val
			},
			cancel() {
				this.popupShow = false
				this.titleVal = 1
				this.equipmentData = []
				this.areaData = []
				this.projectHandlerList()
			},
			
			// 点击底部导航栏清除页面状态
			onTabItemTap() {
				if (this.$store.state.vuex_stata) {
					this.$store.state.vuex_stata = false
				}
			},
			//获取数据
			getDataList() {
			  this.listArr = [
			    {
						id: 1,
			      sysParkId: "1474279383801511937",
			      sysParkName: "测试迭代1园区",
						lat: 39.909,//纬度
						lng: 116.39742,//经度
			      address: "测试具体位置",
			      head: "15847441451",
			      phone: "13845545445",
			    },
			    {
						id: 2,
			      sysParkId: "1509865555600539649",
			      sysParkName: "新增园区",
						lat: 39.9065,//纬度
						lng: 116.3979,//经度
			      address: "测试详细地址",
			      head: "测试",
			      phone: "18445544444",
			    },
			  ];
			},
			openHandler() {
				let that = this
				that.openView = !that.openView
				let info = uni.createSelectorQuery().select(".map");
				info.boundingClientRect(function(data) { //data - 各种参数
					console.log(data) // 获取元素的相关信息
					if (that.openView) {
						that.mapHeight = data.height * 2
						that.fixBottom = -520
					} else {
						that.mapHeight = data.height * 2 - 520
						that.fixBottom = 0
					}
					console.log(that.mapHeight)
				}).exec()
			},
			changeDevice() {
				this.popupShow = !this.popupShow
				if (this.popupShow) {
					this.deviceImage = '/static/icon-change1.png'
				} else {
					this.deviceImage = '/static/icon-change.png'
				}
				// this.$refs.popup.open()
			}
		}
		
  }
</script>

<script module="ModuleInstance" lang="renderjs">
export default {
    data() {
			return {
				map:null,
				layer:null,
				parkList:[],
			};
    },
    mounted(){
			if (window.AMap) {
				// 观测更新的数据在 view 层可以直接访问到
				this.initAmap();
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script');
				// view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
				script.src = `https://webapi.amap.com/maps?v=2.0&key=b0c8fc70cd402ddb153c3416e9261d50`;//您申请的key值
				//script标签的onload事件都是在外部js文件被加载完成并执行完成后才被触发的
				script.onload = () => {
					window._AMapSecurityConfig = {
						securityJsCode:'f1b946e6f51b1235374f1f92c38b0c33',//您申请的安全密钥
					}
					this.initAmap();
				}
				document.head.appendChild(script); 
			}
    },
    beforeDestroy() {
         
    },
    methods: {
			initAmap(){
				this.map = new AMap.Map('amap', {
					viewMode: "2D", //默认使用 2D 模式
					zoom: 2,//显示的缩放级别
					zooms: [2, 15],//地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
					center: [116.39742, 39.909]
				});
				
				this.map.on("complete", ()=>{
					console.log("地图加载完成！");  
					this.createLabelsLayer();
				});
			},
			
        //创建-海量点
			createLabelsLayer(){
				// 创建 AMap.LabelsLayer 图层
				if(!this.map)return;
				if(!this.layer){
					this.layer = new AMap.LabelsLayer({
						zIndex: 1000,
						collision: false
					});
					// 将图层添加到地图
					this.map.add(this.layer);
				}
				this.removeAllOverlay();
				var markers = [];
		
				this.parkList.forEach((element,index) => {
					element.position = [element.lng,element.lat];
					var labelMarker = new AMap.LabelMarker({
						position: element.position,
						icon: {
							type: 'image',
							image: 'static/position.png',
							size: [82, 52],
							anchor: 'bottom-center'
						},
						text: {
							content: '12',
							direction: 'right',
							offset: [-38, -5],
							style: {
								fontSize: 16,
								fillColor: 'red'
							}
						}
					});
					markers.push(labelMarker);
				});
				// 一次性将海量点添加到图层
				this.layer.add(markers);
				if(!this.isExistImplement){
					this.isExistImplement = true;//只执行一次
					this.map.setFitView(null, false, [60, 15, 30, 15]);//自适应显示多个点标记
					// let zoom = this.map.getZoom(); //获取当前地图级别
					// if(zoom>5)this.map.setZoom(5); //设置地图层级
				}
			},
			removeAllOverlay(){
				// 清除地图上所有添加的覆盖物
				this.map.clearMap();
			},
			//接收数组参数
			setParkList(newValue, oldValue, ownerInstance, instance){
				this.parkList = newValue;
				this.createLabelsLayer();
			}
    }
};
</script>

<style lang="scss" scoped>
::v-deep .uni-map {
	z-index: 1;
}
.rotateImage {
	transform: rotateZ(180deg) !important;
	transition: transform .5s ease-in-out;
}
.content {
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow-y: hidden;
	.header {
		width: 100%;
		padding: 30rpx;
		display: flex;
		align-items: center;
		background: #fff;
		background: linear-gradient(180deg, #DFF1FF 140%, rgba(241, 249, 255, 0) 100%)
	}
	.content-header {
		width: 100%;
		background: linear-gradient( 180deg, #DFF1FF 0%, rgba(241,249,255,0) 100%);
		padding: 30rpx;
		.user-info {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			image {
				width: 72rpx;
				height: 72rpx;
				border-radius: 50%;
				border: 1px solid #FFFFFF;
				margin-right: 20rpx;
			}
			.user-size {
				flex: 1;
				view {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					text {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 28rpx;
						font-style: normal;
					}
					.username {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						line-height: 40rpx;
						font-style: normal;
					}
					.deptname {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 34rpx;
						font-style: normal;
					}
				}
			}
		}
		.search {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.search-input {
				position: relative;
				input {
					width: 520rpx;
					height: 64rpx;
					background: #FFFFFF;
					border-radius: 40rpx;
					padding-left: 76rpx;
				}
				.uni-input-placeholder {
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					line-height: 44rpx;
					font-style: normal;
				}
				image {
					width: 44rpx;
					height: 44rpx;
					position: absolute;
					top: 12rpx;
					left: 20rpx;
				}
			}
			.change {
				width: 64rpx;
				height: 64rpx;
			}
		}
	}
	.map {
		width: 100%;
		flex: 1;
		padding: 0 30rpx;
		border-radius: 20rpx;
		position: relative;
		overflow: hidden;
		transition: height .5s ease-in-out;
		::v-deep .amap-container {
			border-radius: 20rpx;
		}
		//高德地图-logo隐藏
		::v-deep .amap-logo {
		  display: none;
		  opacity: 0 !important;
		}
		//高德地图-版权隐藏
		::v-deep .amap-copyright {
		  opacity: 0;
		}
		.loading {
		  position: absolute;
		  top: 35vh;
		  left: 50%;
		  transform: translateX(-50%);
		}
		.amap {
		  height: 100%;
		  position: relative;
		  z-index: 8;
			transition: height .5s ease-in-out;
		}
	}
}

.bottom-box-fixed {
	height: 520rpx;
	width: 100%;
	padding: 30rpx 30rpx 0 30rpx;
	position: fixed;
	bottom: -520rpx;
	left: 0;
	z-index: 10;
	transition: bottom .5s ease-in-out;
	.jiantou {
		width: 244rpx;
		height: 40rpx;
		background: #fff;
		border-radius: 200rpx 200rpx 0 0 !important;
		text-align: center;
		position: absolute;
		top: -40rpx;
		left: 50%;
    transform: translate(-50%, 0);
		image {
			width: 32rpx;
			height: 32rpx;
			// transform: rotateZ(180deg);
			transition: transform .5s ease-in-out;
		}
	}
	.box-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 36rpx;
		.tabs {
			display: flex;
			view {
				font-weight: 400;
				font-size: 32rpx;
				color: #666666;
				line-height: 32rpx;
				text-align: center;
				font-style: normal;
				margin-right: 32rpx;
				position: relative;
				.border {
					width: 32rpx;
					height: 12rpx;
					background: #3C7EFF;
					margin: 0 auto;
					border-radius: 0 0 50% 50% / 40%;
					position: absolute;
					bottom: -12rpx;
					left: 50%;
					transform: translate(-50%, 0);
					.border-son {
						width: 32rpx;
						height: 4rpx;
						background: #fff;
						margin: 0 auto;
						border-radius: 0 0 50% 50% / 40%;
					}
				}
			}
		}
		.look-all {
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
			line-height: 34rpx;
			font-style: normal;
		}
	}
	.popup-content {
		background: #fff;
		padding: 30rpx 24rpx;
		border-radius: 16rpx;
		.view-box {
			.view-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid rgba(0,0,0,0.1);
				padding: 20rpx 0;
				.view-first {
					display: flex;
					align-items: center;
					.round {
						display: inline-block;
						width: 32rpx;
						height: 32rpx;
						background: limegreen;
						margin-right: 12rpx;
						border-radius: 50%;
					}
					text {
						font-weight: 500;
						font-size: 32rpx;
						color: #333333;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
					}
				}
				.view-second {
					display: flex;
					align-items: center;
					.round {
						display: inline-block;
						width: 16rpx;
						height: 16rpx;
						background: rgba(0,0,0,0.15);
						margin-right: 16rpx;
						border-radius: 50%;
					}
					text {
						font-weight: 400;
						font-size: 28rpx;
						color: rgba(0,0,0,0.65);
						line-height: 28rpx;
						font-style: normal;
					}
				}
			}
			.content-popup {
				display: flex;
				padding-top: 32rpx;
				.content-image {
					width: 112rpx;
					height: 112rpx;
					margin-right: 32rpx;
				}
				.info {
					display: flex;
					align-items: center;
					margin-bottom: 12rpx;
					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 8rpx;
					}
					text {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
						line-height: 24rpx;
						font-style: normal;
					}
				}
			}
		}
	}
	.content-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		.info-type {
			font-weight: 500;
			font-size: 14px;
			color: #333333;
			line-height: 14px;
			font-style: normal;
		}
		.info-btn {
			width: 144rpx;
			height: 48rpx;
			background: #3C7EFF;
			border-radius: 8rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 48rpx;
			text-align: center;
			font-style: normal;
		}
	}
}

.dialog {
	.dialog-header {
		display: flex;
		align-items: center;
		padding: 24rpx;
		.text-color {
			color: #3C7EFF;
		}
		text {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
			line-height: 40rpx;
			text-align: left;
			font-style: normal;
		}
		image {
			width: 44rpx;
			height: 44rpx;
		}
	}
	.popup-list {
		.popup-li	 {
			padding: 28rpx 30rpx;
			display: flex;
			justify-content: space-between;
			text {
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				line-height: 40rpx;
				text-align: left;
				font-style: normal;
			}
		}
	}
	.popup-footer {
		width: 100%;
		display: flex;
		padding: 0 30rpx 40rpx 30rpx;
		.u-row {
			width: 100%;
		}
	}
}
</style>
